<!--
    组件使用注意：宽度为200px，高度铺满浏览器，top:73px, bottom:0px, 左右自适应, 脱离了文档
    受影响位置：
-->
<template>
    <div class="leftnav-body">
        <div class="list-nav">
            <!-- 注意ID：group 和 data-parent配合使用 -->
            <div class="panel-group">
                <div class="panel panel-default" v-for="(index, item) in items">
                    <div class="panel-heading" @click="openItem(index)">
                        <a v-link="{ path:item.link }">{{item.title}}</a>
                    </div>
                    <div id="{{item.target}}" class="">
                        <div class="panel-body" v-show="(item.list.length > 0) && (open == index)">
                            <ul class="list-group">
                                <li class="list-group-item" v-for="(index, obj) in item.list">
                                    <a class="item-a" v-link="{ path:obj.url }">{{obj.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                open: -1,
                items: [
                    {title: '系统主页', target: 'one', link: '/index', list: []},
                    {
                        title: '公司管理',
                        target: 'two',
                        link: '',
                        list: [
                            {name: '公司列表', url: '/index/allCompany'},
                            {name: '录入信息', url: '/index/addCompany'}
                        ]
                    },
                    {
                        title: '品种管理',
                        target: 'three',
                        link: '/index/allAariety',
                        list: []
                    },
                    {
                        title: '二维码',
                        target: 'four',
                        link: '',
                        list: [
                            {name: '生成历史', url: '/index/codeHistory'},
                            {name: '查询管理', url: '/index/codeManage'}
                        ]
                    },
                    {
                        title: '管理员',
                        target: 'fire',
                        link: '',
                        list: [
                            {name: '个人信息', url: '/index/profile'},
                            {name: '编辑信息', url: '/index/editProfile'}
                        ]
                    }
                ]
            }
        },
        methods: {
            openItem: function (index) {
                var self = this;
                self.open = index;
            }
        },
        components: {
            'calendar': require('./calendar.vue')
        }
    }
</script>

<style>
    .leftnav-body {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
    }

    .leftnav-body a {
        color: #000;
    }

    .leftnav-body .list-nav {
        margin-top: 15px;
        width: 100%;
        text-align: center;
        letter-spacing: 3px;
    }

    .leftnav-body .panel-body {
        padding: 0;
    }

    .leftnav-body .panel-heading {
        cursor: pointer;
        font-size: 15px;
    }

    .leftnav-body .list-group {
        margin: 0;
        padding: 0;
    }

    .leftnav-body .list-group-item {
        border-radius: 0px;
        border-width: 0px 0px 0px 0px;
    }

    .leftnav-body .list-group-item:hover {
        color: red;
        background-color: #FFFFFF;
    }

    .leftnav-body .item-a {
        color: #398439;
    }

    .leftnav-body .item-a:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
</style>